<template>
  <div class="admin-main" @click="hidden">
    <!--<div class="layui-layout layui-layout-admin">-->
      <!--<div class="layui-header">-->
        <!--<div class="layui-logo">LOGO</div>-->
        <!--&lt;!&ndash; 头部区域（可配合layui已有的水平导航） &ndash;&gt;-->
        <!--<ul class="layui-nav layui-layout-left">-->
          <!--<li class="layui-nav-item"><router-link to="/console">控制台</router-link></li>-->
          <!--<li class="layui-nav-item"><a href="">商品管理</a></li>-->
          <!--<li class="layui-nav-item"><a href="">用户</a></li>-->
          <!--<li class="layui-nav-item">-->
            <!--<a href="javascript:;">其它系统</a>-->
          <!--</li>-->
        <!--</ul>-->
        <!--<ul class="layui-nav layui-layout-right">-->
          <!--<li class="layui-nav-item">-->
            <!--<a href="javascript:;">-->
              <!--<img src="http://t.cn/RCzsdCq" class="layui-nav-img">-->
              <!--6666-->
            <!--</a>-->
          <!--</li>-->
          <!--<li class="layui-nav-item"><a href="">退出</a></li>-->
        <!--</ul>-->
      <!--</div>-->

      <!--<div class="layui-side layui-bg-black">-->
        <!--<div class="layui-side-scroll">-->
          <!--&lt;!&ndash; 左侧导航区域（可配合layui已有的垂直导航） &ndash;&gt;-->
          <!--<ul class="layui-nav layui-nav-tree">-->
              <!--<li class="layui-nav-item left-nav-item" v-for="(item,index) in acceptAdminList" >-->
                <!--<a @click="_toggleLeftNav(item,index)">{{item.name}}</a>-->
                <!--<transition  @leave="leave($event)" @enter="enter($event)" @after-enter="afterEnter(item.children.length,$event)">-->
                <!--<dl class="layui-nav-child " v-show="item.isShow" :style="{overflow:'hidden',height:(item.children.length*40)+'px'}">-->
                  <!--<dd v-for="child in item.children">-->
                    <!--<router-link :to="child.path">{{child.name}}</router-link>-->
                  <!--</dd>-->
                <!--</dl>-->
                <!--</transition>-->
              <!--</li>-->
            <!--<li class="layui-nav-item"><a href="">催收系统</a></li>-->
            <!--<li class="layui-nav-item"><a href="">报表分析</a></li>-->
            <!--<li class="layui-nav-item"><a href="">员工系统</a></li>-->
            <!--<li class="layui-nav-item"><a href="">配置系统</a></li>-->
          <!--</ul>-->
        <!--</div>-->
      <!--</div>-->

      <!--<div class="layui-body">-->
        <!--&lt;!&ndash; 内容主体区域 &ndash;&gt;-->
        <!--<router-view></router-view>-->
      <!--</div>-->

      <!--<div class="layui-footer">-->
        <!--&lt;!&ndash; 底部固定区域 &ndash;&gt;-->
        <!--©  - 底部固定区域-->
      <!--</div>-->
    <!--</div>-->
    <el-container>
      <el-header style="height: 70px;background: #FFFFFF">
        <div class="logo-wrapper">谦一科技</div>
        <div class="user-wrapper" @click.stop.prevent="_tooglePersonSetting">
          <div class="avator-wrapper">
            <img :src="userData.icon" alt="" width="48" height="48">
          </div>
          <div class="name-wrapper">
            <span class="name">{{userData.name}}</span>
          </div>
        </div>
      </el-header>
      <el-container class="main-body">
        <el-aside width="180" style="overflow-x: hidden">
          <ul class="navLeft-wrapper">
              <li class="item" v-for="item in navList"
                  @click="_itemActive(item.name)">
                <a class="item-name"
                   :class="{isActive:item.isActive,isOpen:item.isOpen}
                              "><span class="mark"></span>{{item.name}}
                </a>
                <transition @leave="leave($event)" @enter="enter($event)" @after-enter="afterEnter(item.children.length,$event)">
                  <dl class="child" v-show="item.isOpen" :style="{overflow:'hidden',height:(item.children.length*56)+'px'}">
                    <dd class="child-item" v-for="c in item.children"><span class="mark"></span>{{c.name}}</dd>
                  </dl>
                </transition>
              </li>

          </ul>
        </el-aside>
        <el-container>
          <el-main class="ad-main">
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
      <div class="person-setting" v-show="!tooglePersonSettingStatus">
        <ul>
          <li><a href="#">消息中心</a></li>
          <li><a href="#">修改密码</a></li>
          <li><a href="#" class="logout">安全退出</a></li>
        </ul>
      </div>
    </el-container>
  </div>
</template>
<script>
    /*侧边栏状态
     *@props 0 => 全部开关闭
     *       1 => 开启第一个菜单
     *       2 => 开启上一个浏览的菜单
     *
     */
    import axios from 'axios'
    const LEFTNAV_TYPE = 1;
    import {getCookie} from "../../common/js/cookie";
    import {setCookie} from "../../common/js/cookie";
    import {getStorage} from '../../common/js/localStorage'
    import global from '../global'
    export default {
        name: "admin-main",
        props:{
          adminList:{
            type:Array
          }
        },
        data(){
          return{
            tooglePersonSettingStatus:true, //个人设置开关状态
            acceptAdminList:[],
            userData:{},
            leftNavList:[],
            breadcrumb:[],
            navList:[
              {
                name:'审批系统',
                isOpen:false,
                isActive:false,
                path:'/',
                children:[
                  {
                    name:'所有审批',
                    isActive:false,
                    path:'/'
                  },
                  {
                    name:'我的审批',
                    isActive:false,
                    path:'/'
                  },
                  {
                    name:'审批列表',
                    isActive:false,
                    path:'/'
                  }
                ]
              },
              {
                name:'审批系统1',
                isOpen:false,
                isActive:false,
                path:'/',
                children:[
                  {
                    name:'所有审批1',
                    isActive:false,
                    path:'/'
                  },
                  {
                    name:'我的审批1',
                    isActive:false,
                    path:'/'
                  },
                  {
                    name:'审批列表1',
                    isActive:false,
                    path:'/'
                  }
                ]
              },
              {
                name:'审批系统2',
                isOpen:false,
                isActive:false,
                path:'/',
                children:[
                  {
                    name:'所有审批2',
                    isActive:false,
                    path:'/'
                  },
                  {
                    name:'我的审批2',
                    isActive:false,
                    path:'/'
                  },
                  {
                    name:'审批列表2',
                    isActive:false,
                    path:'/'
                  }
                ]
              },
              {
                name:'审批系统3',
                isOpen:false,
                isActive:false,
                path:'/',
                children:[
                  {
                    name:'所有审批3',
                    isActive:false,
                    path:'/'
                  },
                  {
                    name:'我的审批3',
                    isActive:false,
                    path:'/'
                  },
                  {
                    name:'审批列表3',
                    isActive:false,
                    path:'/'
                  }
                ]
              }
            ]
          }
        },
        created(){

          //为侧边栏菜单附加状态
          this.acceptAdminList = this.adminList;
          // this._isLogin()
          // this._setLeftNavStatus();
          // this._redirect()
          this._getAdminPermission()
        },
        methods:{
          _itemActive(name){
            for(let i=0;i<this.navList.length;i++){
              if(this.navList[i].name===name){
                this.navList[i].isOpen=!this.navList[i].isOpen
              }
            }
            for(let j=0;j<this.navList.length;j++){
              this.navList[j].isActive = false
            }
          },
          showItem(menu){
            let items = []
            for(let i=0;i<menu.length;i++){
              let item = {}
              switch (menu[i].id) {
                case 1:
                  item.path = '/admin/apporvingSystem'
                  item.name = '审批系统'
                  break
              }
              let itemChild = [];
              for(let j=0;j<menu[i].resourceVos.length;j++){
                let itemChilds ={}
                switch (menu[i].resourceVos[j].name) {
                  case '审批列表':
                    itemChilds.name = '所有审批'
                    itemChilds.path = '/admin/allApproving'
                        break
                  case '我的审批':
                    itemChilds.name = '我的审批'
                    itemChilds.path = '/admin/myApproving'
                        break
                }
                itemChild.push(itemChilds)

              }
              item.child = itemChild
              items.push(item)
              this.leftNavList = items
            }
          },
          _getAdminPermission(){
            axios.get('http://'+global.$host+'/admin/adminPermission',
              {
                headers: {
                  'Authorization': getStorage('Authorization')
                }
              }
            )
              .then(res => {
                if(res.status===global.ERR_OK){
                  if(res.data.status===global.CUSTOM_ERR_OK){
                    let data = res.data.data
                    this.userData = data
                    this.leftNavList = data.menu
                    this.showItem(this.userData.menu)
                  }
                }else {
                  return
                }
              })
              .catch(e => {
                console.log(e)
              })
          },
          hidden(){
            if(this.tooglePersonSettingStatus){
              return
            }else {
              this.tooglePersonSettingStatus = !this.tooglePersonSettingStatus
            }
          },
          //toogle personSetting
          _tooglePersonSetting(){
            this.tooglePersonSettingStatus = !this.tooglePersonSettingStatus
          },
          _goRouter(key){

            this.$router.push(key)
          },
          _isLogin(){
            //判断user信息是否为空，如果为空则跳转到登录页
            if(getStorage('user').length){
              this.$router.push('/')
            }

          },
          /*
           *@props index
           *为leftNavStatus重定向赋值
           */
          _toggleLeftNav(item,index){
            this.acceptAdminList.forEach(i => {
              //遍历关闭开关以达到手风琴效果
              if (i.isShow !== this.acceptAdminList[index].isShow) {
                i.isShow = false;
              }
            });
            item.isShow = !item.isShow;
            if(item.isShow){
              setCookie('navStatus',index)
            }else {
              setCookie('navStatus',-1)
            }
          },
          //nav状态刷新判断
          _setLeftNavStatus(){
            if(getCookie('navStatus')){
              let status = parseInt(getCookie('navStatus'))
              for(let i = 0; i<this.acceptAdminList.length; i++){
                this.acceptAdminList[i].isShow = false
                if(i===status){
                  this.acceptAdminList[i].isShow = true
                  }
                }
            }else {
              return
            }
          },
          //进入路由刷新重定向判断
          _redirect(){
            if(this.$route.params.mark){
              this.$router.push('/console')
            }
          },
          leave(ev){
            /*@props
             * ev => 目标dom
             * 侧边栏关闭动画
             */
            ev.style.height = 0;
            ev.style.transition = 'height 0.2s';
          },
          enter(ev){
            /*@props
             * ev => 目标dom
             * 侧边栏进入动画
             */
            ev.style.height = 0;
            ev.style.transition = 'height 0.2s';
          },
          afterEnter(length,ev){
            /*@props
             * ev => 目标dom length =>目标dom子元素长度
             * 侧边栏进入之后动画
             */
            //用目标dom子元素长度计算dom进入之后高度
            ev.style.height = (length*56)+'px';
            ev.style.transition = 'height 0.2s';
          },
        },
        computed:{

        }
    }
</script>
<style scoped lang="stylus">
.admin-main
  width 100%
  height 100%
  .el-container
    height: 100%
    .el-header
      padding 0
      .logo-wrapper
        width 201px
        font-size 12px
        float left
      .user-wrapper
        padding 11px 16px
        width 148px
        float right
        vertical-align bottom
        cursor pointer
        &:hover
          background #FBFBFB
        .avator-wrapper
          width 48px
          height 48px
          float left
        .name-wrapper
          padding-left 16px
          width 72px
          height 48px
          font-size 18px
          text-align left
          line-height 48px
          white-space nowrap
          text-overflow ellipsis
          overflow hidden
          float left
    .el-header, .el-footer
      background-color #B3C0D1
      color #333
      text-align center
      line-height 60px
    .el-aside
      background-color: #383E4B;
      color: #333;
      text-align: center;
      line-height: 200px;
      width 180px
      .navLeft-wrapper
        list-style: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
        color: #ffffff;
        height 100%
        .item
          background: #383E4B;
          .item-name
            display: block;
            position relative
            width: 100%;
            color: #ffffff;
            line-height: 56px;
            height 56px
            .mark
              position: absolute;
              left: 0;
              top:3px;
              display: block;
              width: 3px;
              height: 50px;
              background: transparent;
            &.isActive
              .mark
                background #1e8dff
            &.isOpen
              background #2D323D
              color #1E8DFF
              &:hover
                background #383E4B
          .child
            padding: 0;
            margin: 0;
            .child-item
              position: relative;
              margin: 0;
              background: #2D323D;
              height: 56px;
              line-height: 56px;
              /*padding-left: 33px;*/
              &:hover
                background: #383E4B;
              .mark
                position: absolute;
                left: 0;
                top:3px;
                display: block;
                width: 3px;
                height: 50px;
                background: transparent;
              &.isActive
                .mark
                  background #1E8DFF
      .el-menu
       border-right none
        .el-submenu__icon-arrow
          display none
      .el-col-12
        width 100%
    .person-setting
      position absolute
      top 72px
      right 0
      background #ffffff
      width 180px
      ul
        height 120px
        li
          height 40px
          text-align center
          &:hover
            background #E6E6E6
          a
            font-size 14px
            line-height 40px
            color #333333
            &.logout
              color #FF5E5E
.el-scrollbar__wrap {
  overflow: hidden;
}
.el-scrollbar__view{
  height: 100%;
  background black

}
 .is-horizontal{
   display :none
 }

 .el-scrollbar__bar{
   display :none
}
.el-menu-item-group__title{
  padding 0 !important
  margin 0
}



.el-main {
  background-color: #E9EEF3;
  color: #333;
  position relative
}
.el-submenu__icon-arrow{
  display: none !important
}

.el-menu{
  border none
}
.ad-main{
  padding 0
  margin 0
}
.el-menu-item.is-active{
  color #ffffff !important;
  border-left 3px solid #00a0dc
}
.el-menu-item{
  border-left 3px solid transparent
}

</style>
